<template>
	<div class="home-container">
		<div class="content">
			<div v-for="(item, index) in navgation" :key="index" class="content-item">
				<div class="content-item-icon">
					<n-icon size="30" :component="item.icon">
						<!-- <LoginOutlined></LoginOutlined> -->
					</n-icon>
				</div>
				<span>{{ item.name }}</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { LogIn, ListSharp, ColorFilter, ChatboxEllipses, ImagesSharp, LogoGithub } from '@vicons/ionicons5'
import { reactive } from 'vue'

const navgation = reactive([
	{ name: 'Login', icon: LogIn, path: '/login' },
	{ name: 'Article-List', icon: ListSharp, path: '/article' },
	{ name: 'Demo', icon: ColorFilter, path: '/demo' },
	{ name: 'LeaveMessage', icon: ChatboxEllipses, path: '/message' },
	{ name: 'Photos', icon: ImagesSharp, path: '/photos' },
	{ name: 'Github', icon: LogoGithub, path: 'https://github.com/Acmenlei' }
])
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
